import React from 'react';
import * as echarts from 'echarts';
import { connect } from 'react-redux';
import './App.css';

const handle = (property) => {
  return function (a, b) {
    const val1 = a[property];
    const val2 = b[property];
    return val1 - val2;
  }
}
class AppRadar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      babyData: {}
    }
  }
  componentDidMount() {
    this.fetchData(this.props)
  }
  fetchData = (props) => {
    const { babyData } = props;

    var chartDom = document.getElementById('LineWeightDiv');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      // title: {
      //     text: '五大能力'
      // },
      tooltip: {},
      legend: {
        data: ['中等', '良好', '优秀', '宝宝'],
        //left: '5%',
        icon: 'circle',
      },
      radar: {
        shape: 'circle',
        name: {
          textStyle: {
            color: '#fff',
            backgroundColor: '#607D8B',
            borderRadius: 3,
            padding: [3, 3],
          }
        },
        radius: 80, //圆半径
        indicator: [
          { name: '大运动能力', max: 120 },
          { name: '精细运动', max: 120 },
          { name: '语言与交流能力', max: 120 },
          { name: '认知及适应能力', max: 120 },
          { name: '社交能力', max: 120 },
        ]
      },
      series: [{
        name: '标准 vs 宝宝',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
          {
            value: [80, 80, 80, 80, 80],
            name: '中等',
            lineStyle: {
              normal: {
                opacity: 0.3,
              }
            },
          },
          {
            value: [90, 90, 90, 90, 90],
            name: '良好',
            lineStyle: {
              normal: {
                opacity: 0.3,
              }
            },
          },
          {
            value: [100,100,100,100,100],
            name: '优秀',
            lineStyle: {
              normal: {
                opacity: 0.3,
              }
            },
          },
          {
            value: [babyData.abilityGreatAth, babyData.abilityFineMotion, babyData.abilityLang, babyData.abilityCognitive, babyData.abilitySocial],
            name: '宝宝',
            lineStyle: {
              normal: {
                opacity: 1,
              }
            },

          }
        ]
      }]
    };

    option && myChart.setOption(option);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps) {
      this.fetchData(nextProps);
    }
  }
  render() {
    return (
      <div id="LineWeightDiv" style={{ height: 300 }}></div>
    )
  };
}
export default connect(
  state => ({ currentUser: state.setCurrentUser, currentChild: state.setCurrentChild })
)(AppRadar)